<template>
    <form method="post">
        <div style="width: 100%; overflow: auto">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 50%; height: 100%; float: left"><font style="font-size: 25px; font-family: 微软雅黑">基本信息</font></div>
            <div style="width: 45.8%; height: 100%; float: left; text-align: right; margin-right: 5px">
                <font style="font-size: 20px; font-family: 微软雅黑; color: #356cb3">单位：万元、公顷</font>
            </div>
            <div style="width: 4%; height: 100%; float: right; text-align: right"></div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="村名称" prop="villageName"  style="width: 96%">
                            <el-input v-model="ruleForm.villageName" placeholder="请填写村名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开发前后"  prop="exploitqianhou">
                            <el-input v-model="ruleForm.exploitqianhou" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="总面积"  prop="totalArea">
                            <el-input v-model="ruleForm.totalArea" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-tabs type="border-card" id="id_tabs" >
                    <!-- 农用地 -->
                    <el-tab-pane label="农用地" name="first">
                        <!-- <span slot="label" class="tabPaneJhtz"><font class="lableFont"> 农用地</font></span> -->
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="合计"  prop="total">
                                        <el-input v-model="ruleForm.total" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="jsxx_title">耕地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="小计" prop="subtotal" >
                                        <el-input v-model="ruleForm.subtotal" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="水田"   prop="paddy">
                                        <el-input v-model="ruleForm.paddy" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="旱地"  prop="dryLand">
                                        <el-input v-model="ruleForm.dryLand" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="其他耕地" prop="otherPlough" >
                                        <el-input v-model="ruleForm.otherPlough" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />
                            <div class="jsxx_title">园地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="小计"  prop="ysubtotal">
                                        <el-input v-model="ruleForm.ysubtotal" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="果园"  prop="orchard">
                                        <el-input v-model="ruleForm.orchard" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="花园"  prop="garden">
                                        <el-input v-model="ruleForm.garden" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="其他园地"  prop="ortherField">
                                        <el-input v-model="ruleForm.ortherField" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />
                            <div class="jsxx_title">林地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="林地"  prop="forest">
                                        <el-input v-model="ruleForm.forest" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />
                            <div class="jsxx_title">其他农用地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="小计"  prop="qsubtotal">
                                        <el-input v-model="ruleForm.qsubtotal" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="村道路"  prop="cunWay">
                                        <el-input v-model="ruleForm.cunWay" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="坑塘水面"  prop="pitPond">
                                        <el-input v-model="ruleForm.pitPond" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="设施农用地"  prop="agriculturalLand">
                                        <el-input v-model="ruleForm.agriculturalLand" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="沟渠"  prop="irrigation">
                                        <el-input v-model="ruleForm.irrigation" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>

                    <!-- 建设用地 -->
                    <el-tab-pane label="建设用地" name="second">
                        <!-- <span slot="label" class="tabPaneJhjs"><font class="lableFont"> 建设用地</font></span> -->
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="合计"  prop="ttotal">
                                        <el-input v-model="ruleForm.ttotal" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />
                            <div class="jsxx_title">特殊用地：</div>

                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="小计" prop="tsubtotal">
                                        <el-input v-model="ruleForm.tsubtotal" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="殡葬用地"  prop="funeral">
                                        <el-input v-model="ruleForm.funeral" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="其他建设用地"  prop="otherjs">
                                        <el-input v-model="ruleForm.otherjs" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>

                    <!-- 未利用地 -->
                    <el-tab-pane label="未利用地" name="third">
                        <!-- <span slot="label" class="tabPaneJhxz"><font class="lableFont"> 未利用地</font></span> -->
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="合计"  prop="htotal">
                                        <el-input v-model="ruleForm.htotal" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="其他草地"  prop="otherGrassland">
                                        <el-input v-model="ruleForm.otherGrassland" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="水域及水利设施用地"  prop="sujway">
                                        <el-input v-model="ruleForm.sujway" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="其他未利用地"  prop="otherUnutilized">
                                        <el-input v-model="ruleForm.otherUnutilized" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>
                    <!-- 新增耕地 -->
                    <el-tab-pane label="新增耕地" name="fourth">
                        <!-- <span slot="label" class="tabPaneJhxz"><font class="lableFont"> 新增耕地</font></span> -->
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="新增耕地" prop="saveplough" >
                                        <el-input v-model="ruleForm.saveplough" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <br />
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button @click="saveOrUpdate()" class="bthNormal">保存</el-button>
                        <el-button @click="shutdown()" class="bthNormal">关闭</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </form>
</template>

<script>
import label from '@/api/lx_infor/qhdzb.js';
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            ruleForm: {
                pid: '',
                villageName: '',
                exploitqianhou: '',
                totalArea: '',
                total: '',
                subtotal: '',
                paddy: '',
                dryLand: '',
                otherPlough: '',
                ysubtotal: '',
                orchard: '',
                garden: '',
                ortherField: '',
                forest: '',
                qsubtotal: '',
                pitPond: '',
                agriculturalLand: '',
                irrigation: '',
                ttotal: '',
                tsubtotal: '',
                funeral: '',
                htotal: '',
                otherGrassland: '',
                sujway: '',
                otherUnutilized: '',
                saveplough: '',
                otherjs: '',
            },
            rules: {
                villageName: [
                    { required: true, message: '请输入村名称', trigger: 'blur' }
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                exploitqianhou: [{ required: true, validator: checkNum, trigger: 'blur' }],
                //region: [{ required: true, message: '请填写所在县', trigger: 'change' }],
                totalArea: [{ required: true, validator: checkNum, trigger: 'blur' }],
                total: [{ required: true, validator: checkNum, trigger: 'blur' }],
                subtotal: [{ required: true, validator: checkNum, trigger: 'blur' }],
                paddy: [{ required: true, validator: checkNum, trigger: 'blur' }],
                dryLand: [{ required: true, validator: checkNum, trigger: 'blur' }],


                otherPlough: [{ required: true, validator: checkNum, trigger: 'blur' }],
                ysubtotal: [{ required: true, validator: checkNum, trigger: 'blur' }],
                orchard: [{ required: true, validator: checkNum, trigger: 'blur' }],
                garden: [{ required: true, validator: checkNum, trigger: 'blur' }],
                ortherField:[{ required: true, validator: checkNum, trigger: 'blur' }],


                forest: [{ required: true, validator: checkNum, trigger: 'blur' }],
                qsubtotal: [{ required: true, validator: checkNum, trigger: 'blur' }],
                cunWay: [{ required: true, validator: checkNum, trigger: 'blur' }],
                pitPond: [{ required: true, validator: checkNum, trigger: 'blur' }],
                agriculturalLand: [{ required: true, validator: checkNum, trigger: 'blur' }],
                irrigation: [{ validator: checkNum, trigger: 'blur' }],
                ttotal: [{ validator: checkNum, trigger: 'blur' }],
                tsubtotal: [{ validator: checkNum, trigger: 'blur' }],

                funeral: [{ validator: checkNum, trigger: 'blur' }],
                otherjs: [{ validator: checkNum, trigger: 'blur' }],
                htotal: [{ validator: checkNum, trigger: 'blur' }],
                otherGrassland: [{ validator: checkNum, trigger: 'blur' }],
                sujway: [{ validator: checkNum, trigger: 'blur' }],
                otherUnutilized: [{ validator: checkNum, trigger: 'blur' }],
                saveplough: [{ validator: checkNum, trigger: 'blur' }],

            }
        };
    },
    created() {
        this.init();
        setTimeout(function () {
            $('#tsyd').find('label').eq(0).css('margin-top', '20px');
        }, 100);
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        shutdown() {
            $('#idcloseclick', parent.document).click();
        },
        init() {
            if (this.$route.query && this.$route.query.pid) {
                const id = this.$route.query.pid;
                this.getInfo(id);
            } else {
                this.ruleForm = {};
            }
        },
        saveOrUpdate() {
            if (!this.ruleForm.id) {
                //添加
                this.onSubmit();
            } else {
               
                //修改
                this.update();
            }
        },
        onSubmit() {
            this.ruleForm.pid = this.$route.query.pid
            label.save(this.ruleForm).then((Response) => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            });
        },
        tonew() {
            this.ruleForm = {};
        },
        getInfo(pid) {
            label.openInfo(pid).then((response) => {
                this.ruleForm = response.data;
            });
        },
        update() {
            label.updateInfo(this.ruleForm).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            });
        },
        
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
#id_tabs div.el-tabs__content {
    padding: 0;
}
.jsxx_title {
    font-family: '微软雅黑';
    color: #356cb3;
    font-size: 25px;
}
.el-tabs{
    height: 1060px;
}
</style>